#{extends 'main.html' /}
#{set title:'Give2Get - User' /}


<div id="user_detail">

    <!-- User Basic Info & Rating -->
    <div id="info_and_rating">

        <!-- User Name -->
        <p id="username">${user.getRegistration().getFirstname() + " " + user.getRegistration().getLastname()}</p>

        <table width="100%">

            <tr>

                <!-- Basic User Info -->
                <td width="50%">

                    <table id="profile_basic_info" width="100%" border="1">
                        <tr class="even">
                            <td>First Name</td>
                            <td>${user.getRegistration().getFirstname()}</td>
                        </tr>
                        <tr class="odd">
                            <td>Last Name</td>
                            <td>${user.getRegistration().getLastname()}</td>
                        </tr>
                        <tr class="even">
                            <td>Member Since</td>
                            <td>${user.getRegistration().getActivated()}</td>
                        </tr>
                        <tr class="odd">
                            <td># of Posted Services</td>
                            <td>${user.getNumOfPostedServices()}</td>
                        </tr>
                        <tr class="even">
                            <td># of Comments</td>
                            <td>${user.getNumOfComments()}</td>
                        </tr>
                        <tr class="odd">
                            <td>Rating</td>
                            <td>${user.getRating()}</td>
                        </tr>
                        <tr class="even">
                            <td></td>
                            <td><a href="/sendMessage/${user.getId()}">Send Message to ${user.getRegistration().getFirstname()}</a></td>
                        </tr>

                    </table>

                </td>

                
                <!-- Rating -->
                <td valign="middle" style="vertical-align:middle;" width="50%">
                    <p>Rating</p>
                    <p class="userrating">${user.getRating()}</p>
                </td>



            </tr>
        </table>

    </div>


    <!-- User Services -->
    <div id="user_services">

        <p class="title_profile">${user.getRegistration().getFirstname() + " " + user.getRegistration().getLastname()}'s Services</p>

        #{if userServices}
        <table width="100%" id="user_posted_services">

            <thead>
            <tr>
                <th>Title</th>
                <th>Created</th>
                <th>Status</th>
                <th></th>
            </tr>
            </thead>

            <tbody>

            #{list userServices, as:'service'}
            #{form @Services.request()}
            <tr class="${service.oddOrEven}">
                <td><a href="/service/${service.id}">${service.title.length() > 200 ? service.title[0..200] + '..' : service.title}</a>
                </td>
                <td style="text-align:center;">${service.created}</td>
                <td style="text-align:center;">${service.status}</td>
                <td><input type="submit" value="Request"/></td>
                <input type="hidden" name="serviceId"  value="${service.id}"/>
                <input type="hidden" name="providerId"  value="${user.getId()}"/>
                <input type="hidden" name="serviceTitle"  value="${service.title}"/>
            </tr>
            #{/form}
            #{/list}

            </tbody>

        </table>
        #{/if}
        #{else}
        <p align="center">No Provided Services</p>
        #{/else}

    </div>


    <!-- User Ratings-->
    <div id="user_ratings">

        <p class="title_profile">${user.getRegistration().getFirstname() + " " + user.getRegistration().getLastname()}'s Ratings</p>

        #{if serviceRatings}
        <table width="100%">
            #{list serviceRatings, as:'rating'}
            <tr class="${rating.oddOrEven}">
                <td>
                    <table width="100%">
                        <tr>
                            <td width="80%" class="comment_text">${rating.comment}</td>
                        </tr>                        
                        <tr>
                            <td class="comment_date">${rating.created}, for service <i>'${rating.serviceTitle}'</i></td>
                            <td class="comment_owner">rated <b>${rating.value}</b> by <i>${rating.givenBy}</i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            #{/list}

        </table>
        #{/if}
        #{else}
        <p align="center">No Rating or Comment Posted</p>
        #{/else}

    </div>

</div>